<template>

  <el-container>
    <el-main>
      <div class="test-form">
        <el-divider content-position="left">{{ json.formTitle }}</el-divider>
        <parser :key="key2" :form-conf="formConf" @submit="sumbitForm" />
        <div style="text-align: right; padding-right: 20px; padding-top: 20px;" v-show="false">
          <el-button size="medium" @click="sumbitForm" type="primary" icon="el-icon-check">提交</el-button>
          <el-button size="medium" @click="back" icon="el-icon-back">返回</el-button>
        </div>
      </div>
    </el-main>
    <el-aside width="800px;" style="">
      <h4>流程图</h4>
      <el-image :src="imgUrl" lazy></el-image>
      <h4>审批历史</h4>
      <el-timeline :reverse="reverse">
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :timestamp="activity.endTime || '进行中'">
          {{activity.name+' '+(activity.actionName||'')}}
        </el-timeline-item>
      </el-timeline>
    </el-aside>

    <!-- 测试运行的返回结果 -->
    <el-dialog :visible.sync="runDialog.open" :title="runDialog.title" width="40%">
      <pre>{{ JSON.stringify(runDialog.json, null, 4) }}</pre>
      <span slot="footer" class="dialog-footer">
        <el-button @click="runDialog.open = false">关闭</el-button>
        <el-button type="primary" @click="runDialog.open = false">确定</el-button>
      </span>
    </el-dialog>

  </el-container>
</template>

<script>
    //import Parser from '../Parser'
    // 若parser是通过安装npm方式集成到项目中的，使用此行引入
    import Parser from 'form-gen-parser'
    import {saveJson, listJson, getJson, getJsonByKey, getJsonByKeyWithVersion, exists} from "@/api/openform/generator";
    import { getProcDef, startDefinition } from "@/api/activiti/definition.js"
    import {closeSelectedTag} from "@/utils/tool.js"
    import { loadData,taskDetail,complete,listHis } from "@/api/activiti/task.js"

    export default {
        components: {
            Parser
        },
        props: {},
        data() {
            return {
                key2: +new Date(),
                runDialog: {//测试运行弹出框
                    open: false
                    , title: "数据预览"
                    , json: "{}"
                },
                json: {},
                imgUrl: null,
                procDef: {},
                procInst: {},
                task: {},
                formConf: {
                    "fields": [
                    ],
                    "formRef": "elForm",
                    "formModel": "formData",
                    "size": "min",
                    "labelPosition": "right",
                    "labelWidth": 100,
                    "formRules": "rules",
                    "gutter": 15,
                    "disabled": false,
                    "span": 24,
                    "formBtns": false
                },
                reverse: true,
                activities: []
            }
        },
        computed: {},
        watch: {},
        created() {},
        mounted() {
            let procDefId = this.$route.params && this.$route.params.procDefId;
            procDefId = procDefId.replace(/_/g,":");

            getProcDef(procDefId).then(res => {
                if(!res || !res.data){
                    this.$message.warning("流程定义："+procDefId+"不存在");
                }
                this.procDef = res.data;
            });

            const dataId = this.$route.params && this.$route.params.dataId;//获取传入的数据id
            const taskId = this.$route.params && this.$route.params.taskId;//获取传入的数据id
            getJson(dataId).then(res => {
                if(!res.data){
                    this.$message.warning("表单："+dataId+"不存在");
                    return null;
                }
                this.json = res.data;
                let json = JSON.parse(res.data.json);
                json.formBtns = true;//禁用按钮
                //json.disabled = true;//禁用编辑
                this.formConf = json;
                this.key2 = +new Date();//刷新表单
                return taskDetail(taskId);
            }).then(res => {
                if(!res || !res.data){
                    return null;
                }
                this.task = res.data;
                this.imgUrl = process.env.VUE_APP_BASE_API+'/activiti/activiti/process/diagram/inst/' + res.data.instanceId;//流程图
                return loadData(res.data.businessKey);
            }).then(res => {
                if(!res || !res.data){
                    this.$message.warning("无表单数据");
                    return;
                }
                this.fillFormData(this.formConf, res.data);//加载数据
                this.key2 = +new Date();//刷新表单
                return this;
            }).then(res => {
                listHis(this.task.instanceId).then(res => {
                    if(!res || !res.rows){
                        return;
                    }
                    this.activities = res.rows;
                });
            });
        },
        methods: {
            fillFormData(form, data) {
                form.fields.forEach(item => {
                    const val = data[item.__vModel__]
                    if (val) {
                        item.__config__.defaultValue = val
                    }
                })
            },
            sumbitForm(data) {
                data.id = this.task.businessKey;
                this.runDialog.json = data;
                //this.runDialog.open = true;
                this.$loading();
                const task = this.task;
                this.$confirm('确认提交任务?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "info"
                }).then(function () {
                    return complete(task.taskId, {
                        formData: data
                    });
                }).then(res => {
                    this.msgSuccess("操作成功");
                    this.$loading().close();
                    closeSelectedTag(this);
                });
            }
            ,back(){
                closeSelectedTag(this);
            }
        }
    }
</script>

<style lang="scss" scoped>
  .test-form {
    margin: 0px auto;
    width: 800px;
    padding: 0px;
  }
</style>
